import React, { useEffect, useMemo, useState } from 'react'
import { DateRange } from 'react-date-range'
import 'react-date-range/dist/styles.css' // 样式文件
import 'react-date-range/dist/theme/default.css' // 主题样式文件
import { timeStrChange, timeNumberChange, formatDate, last7Days, locale, today, isSameRangeDate } from './utils'
import './index.less'
import cm from 'classnames'
import { format } from 'date-fns'

const Index = (props) => {
  const { direction = 'left', onChange, className, initDate } = props
  const [showPanel, setShowPanel] = useState(false)
  const [dateRange, setState] = useState([initDate || timeNumberChange[0].dateRange])

  const [currDate, setCurrDate] = useState(isSameRangeDate(initDate))
  const [init, setInit] = useState(false)
  const selectedValue = useMemo(() => {
    return formatDate(dateRange[0])
  }, [dateRange])
  useEffect(() => {
    setInit(true)
    const clickDate = () => setShowPanel(false)
    window.addEventListener('click', clickDate)
    window.addEventListener('blur', clickDate)
    return () => {
      window.removeEventListener('click', clickDate)
      window.removeEventListener('blur', clickDate)
    }
  }, [])

  const stop = (e) => e.stopPropagation()
  const togglePanel = (e) => {
    stop(e)
    setShowPanel(!showPanel)
  }

  //时间范围改变
  const handleRangeChange = (ranges) => {
    // 更新日期范围
    setState([ranges.selection])
    setCurrDate(isSameRangeDate(ranges.selection))
  }
  useEffect(() => {
    if (!init) {
      return
    }
    const { startDate, endDate } = dateRange[0]
    onChange({
      startDate: format(startDate, 'yyyy-MM-dd'),
      endDate: format(endDate, 'yyyy-MM-dd'),
      dateObj: dateRange[0],
    })
  }, [dateRange])

  return (
    <div className={cm('dateRange', className)}>
      <div
        className={cm({
          datePreview: true,
          datePreviewOpen: showPanel,
        })}
        onClick={togglePanel}
      >
        <span>
          {selectedValue.startStr} - {selectedValue.endStr}
        </span>
        <img src="/images/date.webp" />
      </div>
      {showPanel ? (
        <div className={cm('datePanel', direction === 'right' ? 'panelRight' : 'panelLeft')}>
          <div className="date-menu">
            <div className="date-menu1">
              {timeStrChange.map((item) => {
                return (
                  <div
                    key={item.id}
                    className={cm('date-menu-item', item.id == currDate ? 'date-active' : '')}
                    onClick={() => [setCurrDate(item.id), setState([item.dateRange])]}
                  >
                    {item.name}
                  </div>
                )
              })}
            </div>
            <div className="date-menu2">
              {timeNumberChange.map((item) => {
                return (
                  <div
                    key={item.id}
                    className={cm('date-menu-item', item.id == currDate ? 'date-active' : '')}
                    onClick={() => [setCurrDate(item.id), setState([item.dateRange])]}
                  >
                    {item.name}
                  </div>
                )
              })}
            </div>
          </div>
          <div onClick={stop}>
            <DateRange
              onChange={handleRangeChange}
              months={2}
              ranges={dateRange}
              direction="horizontal"
              locale={locale}
              rangeColors={['#ff8032']}
              maxDate={today}
              color="red"
              className="customDateRange"
            />
          </div>
        </div>
      ) : null}
    </div>
  )
}

Index.LAST7DAYS = last7Days()
export default Index
